<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    append-to-body
    destroy-on-close
    v-bind="$attrs"
    v-on="$listeners"
    @opened="handleOpen"
    @close="handleClose"
  >
    <div class="log-com-box">
      <component
        :is="name"
        ref="child"
        :data="data"
        v-bind="$attrs"
        @ok="ok"
        @cancel="cancel"
      ></component>
    </div>

  </el-drawer>
</template>

<script>
import Log from './components/log.vue'
export default {
  name: 'BiLog',
  components: {
    Log
  },
  props: {
    title: {
      type: String,
      default: '操作日志'
    },
    value: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'Log'
    },
    data: {
      type: Object || Array,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('onclose', value)
      }
    }
  },
  methods: {
    handleOpen() {
      // console.log(this.$refs.child)
      this.$refs.child && this.$refs.child.handleOpen()
    },
    handleClose() {
      this.visible = false
    },
    ok() {},
    cancel() {}
  }
}
</script>

<style lang="scss" scoped>
.log-com-box {
  height: calc(100vh - 80px);
  overflow-y: auto;
}
</style>
